<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="resources/css/extremecomponents.css">
<script type="text/javascript"
	src="resources/javascript/extremecomponents.js"></script>

<script type="text/javascript" src="resources/javascript/jquery.js"></script>

<script type="text/javascript">
	function onTableClick(idUnidadmedida, unidadmedida) {

		alert(idUnidadmedida + ' ' + unidadmedida);
		$("#idUnidadmedida").val(idUnidadmedida);
		$("#unidadmedida").val(unidadmedida);
		document.getElementsByName('unidadmedida')[0].value = unidadmedida;

	}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SIB - Unidad medida</title>
<style type="text/css">
body {
	font-family: sans-serif;
}

.data,.data td {
	border-collapse: collapse;
	width: 50%;
	border: 1px solid #aaa;
	margin: 2px;
	padding: 2px;
}

.data th {
	font-weight: bold;
	background-color: #5C82FF;
	color: white;
}
</style>

</head>
<body>
	<h2>Catalogo Unidad medida</h2>

	<form:form method="post" action="unidadmedida/add"
		commandName="unidadmedida">

		<table>
			<tr>
				<td><form:label path="idUnidadmedida">Id Unidadmedida</form:label></td>
				<td><form:input path="idUnidadmedida" /></td>
			</tr>
			<tr>
				<td><form:label path="unidadmedida">Unidad Medida</form:label></td>
				<td><form:input path="unidadmedida" id="unidadmedida" /></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="add" /></td>
			</tr>
		</table>
	</form:form>
	<!-- Mostrar List  -->
	<h3>Unidad medida</h3>
	<c:if test="${!empty unidadmedidaList}">
		<table class="data">
			<tr>
				<th>Id</th>
				<th>Nombre</th>
				<th>Editar</th>
				<th>Eliminar</th>
			</tr>
			<c:forEach items="${unidadmedidaList}" var="unidadmedida">
				<tr>
					<td>${unidadmedida.idUnidadmedida}</td>
					<td>${unidadmedida.unidadmedida}</td>
					<td><a
						href="unidadmedida/select/${unidadmedida.idUnidadmedida}">seleccionar</a></td>
					<td><a
						href="unidadmedida/delete/${unidadmedida.idUnidadmedida}">borrar</a></td>
				</tr>
			</c:forEach>
		</table>
	</c:if>
	<!-- Extreme Table  -->
	<ec:table items="unidadmedidaList"
		action="${pageContext.request.contextPath}/unidadmedida"
		view="compact"
		imagePath="${pageContext.request.contextPath}/resources/images/compact/*.gif"
		rowsDisplayed="8" autoIncludeParameters="false" var="pres">
		<ec:exportPdf fileName="output.pdf" tooltip="Export PDF"
			headerColor="black" headerBackgroundColor="#b6c2da"
			headerTitle="Presidents" />
		<ec:exportXls fileName="presidents.xls" tooltip="Export Excel" />

		<ec:row highlightRow="true"
			onclick="onTableClick('${pageScope.pres.idUnidadmedida}','${pageScope.pres.unidadmedida}');">
			<ec:column property="idUnidadmedida" title="Name" />
			<ec:column property="unidadmedida" />
		</ec:row>
	</ec:table>
</body>
</html>